<template>
	<scroll-view :scroll-y="false" class="scroll-box" >
		<view class="data-list">
			<view v-for="(item,index) in dataList" class="item" :key="index" @tap="jumpPage(item)">
				<view class="img-box">
					<image class="img" :src="item.imgurl" mode=""></image>
					<view class="className">
						{{item.className}}
					</view>
				</view>
				<view class="article-Name">
					{{item.articleName}}
				</view>
				<view class="article-conent">
					{{item.articleConent}}
				</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: []
			}, 
			status:{
				type:String,
				default:'more'
			}
		},
		data() {
			return { 
				loadMoreTime: null
			}
		},
		methods: {  
			jumpPage(item){ 
				this.$emit('jumpPage',item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-box {
		width: 100%;
		// height: 100vh;
		// padding-bottom: 100upx;
		.data-list {
			width: 100%;
			// border: 1px solid;
			box-sizing: border-box;

			.item {
				width: 100%;
				padding: 20upx;
				box-sizing: border-box;
				background: #fff;
				margin: 20upx 0;

				.img-box {
					position: relative;
					width: 100%;
					height: 350upx;
			
					.img {
						width: 100%;
						height: 100%;
					}

					.className {
						position: absolute;
						left: 10upx;
						bottom: 20upx;
						height: 60upx;
						line-height: 60upx;
						font-size: 1rem;
						color: #fff;
						padding: 0 10upx;
						background: rgba(0, 0, 0, .6);

					}
				}

				.article-Name {
					height: 100upx;
					line-height: 100upx;
					font-size: 1.5rem;
				}

				.article-conent {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					color: #666;
					font-size: .8rem;
				}
			}
		}
	}
</style>
